<template>
<div class="swiper">
	<swiper :options="swiperOption" v-if="showSwiper"><!--v-if="list.length"定义list小于0的时候不获取-->
	  <!-- slides -->
	  <swiper-slide v-for="item in list">
	  	<img class="swiper-img" :key="item.id" :src="item.imgUrl">
	  </swiper-slide>
	  <!-- Optional controls 滚动按钮 -->
	  <div class="swiper-pagination"  slot="pagination"></div>
	  <!--左右箭头-->
	  <!--<div class="swiper-button-prev" slot="button-prev"></div>
	  <div class="swiper-button-next" slot="button-next"></div>-->
	  <!--滚动条-->
	  <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
	</swiper>
</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
  	list: Array
  },
  data () {
    return {
      swiperOption: {
      	pagination: '.swiper-pagination',/*设置滚动按钮*/
      	loop: true,  /*设置循环滑动*/
      	autoplay: 2000, /*设置自动播放2秒一次*/
      	speed: 500 /*设置播放速度*/
   		}
    }
  },
  computed: {
  	showSwiper () {
  		return this.list.length
  	}
  }
}
</script>

<style lang="stylus" scoped>
.swiper >>> .swiper-pagination-bullet-active
	background:#fff
.swiper
	overflow:hidden
	width:100%
	height:0
	padding-bottom:31%
	background:#eee
	.swiper-img
		width:100%

</style>